<template>
  <my-map-cluster
    ref="cluster"
    v-if="data"
    :data="data"
    :style-creator="styleCreator"
    :distance="distance"
    :zIndex="zIndex"
    @click="clickEvent"
    @dblclick="dblclickEvent"
    @contextmenu.prevent
  />
</template>

<script>
import {
  MyMapCluster,
} from "$ui/map";
import {
  Style as styleStyle,
  Icon as styleIcon,
  Circle as styleCircle,
  Stroke as styleStroke,
  Fill as styleFill,
  Text as styleText,
} from "ol/style";

export default {
  name:"OceCluster",
  components: { MyMapCluster },
  data() {
    return {
      styleCreator: function (feature, resolution) {
        var size = feature.get("features").length;
        if (size == 1) {
          return new styleStyle({
            image: new styleIcon({
              src: "/img/cluster/bus.png",
              displacement: [0,0]
            }),
          });
        }
         else if (size < 10) {
          return new styleStyle({
            image: new styleIcon({
              src: '/img/cluster/m0.png'
            }),
            text: new styleText({
              text: size.toString(),
              offsetY: 2,
              offsetX: 1,
              fill: new styleFill({
                color: "white",
                padding: '20px'
              }),
            }),
          });
        } else if (size < 50) {
          return new styleStyle({
            image: new styleIcon({
              src: '/img/cluster/m1.png'
            }),
            text: new styleText({
              text: size.toString(),
              offsetY: 2,
              offsetX: 1,
              fill: new styleFill({
                color: "white",
                padding: '20px'
              }),
            }),
          });
        } else if (size < 100) {
          return new styleStyle({
            image: new styleIcon({
              src: '/img/cluster/m2.png'
            }),
            text: new styleText({
              text: size.toString(),
              offsetY: 2,
              offsetX: 1,
              fill: new styleFill({
                color: "white",
                padding: '20px'
              }),
            }),
          });
        } else if (size < 300) {
          return new styleStyle({
            image: new styleIcon({
              src: '/img/cluster/m3.png'
            }),
            text: new styleText({
              text: size.toString(),
              offsetY: 2,
              offsetX: 1,
              fill: new styleFill({
                color: "white",
                padding: '20px'
              }),
            }),
          });
        } else {
          return new styleStyle({
            image: new styleIcon({
              src: '/img/cluster/m4.png'
            }),
            text: new styleText({
              text: size.toString(),
              offsetY: 2,
              offsetX: 1,
              fill: new styleFill({
                color: "white",
                padding: '20px'
              }),
            }),
          });
        } 
        // else {
        //   return new styleStyle({
        //     image: new styleCircle({
        //       radius: 60,
        //       stroke: new styleStroke({
        //         color: "white",
        //       }),
        //       fill: new styleFill({
        //         color: "green",
        //       }),
        //     }),
        //     text: new styleText({
        //       scale: 2,
        //       text: size.toString(),
        //       fill: new styleFill({
        //         color: "white",
        //       }),
        //     }),
        //   });
        // } 
      },
    }
  },
  props:{
    data: {
      type: Array,
      default: null
    },
    distance: {
      type: Number,
      default: 150
    },
    zIndex: {
      type: Number,
      default: 100
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.bindEvents()
    })
  },
  methods: {
    // 点击回调
    clickEvent(e,feature) {
      const features = feature.get('features') || []
      if (features.length > 1) {
        this.$emit('clickCircle',{e,feature,features})
      } else {
        this.$emit('clickPoint',{e, feature,point:features[0]})
      }
    },
    // 右键回调
    contextMenuEvent(e,feature) {
      const features = feature.get('features') || []
      if (features.length > 1) {
        this.$emit('contextMenuCircle',{e, feature, features})
      } else {
        this.$emit('contextMenuPoint',{e, feature, point:features[0]})
      }
    },
    // 双击事件
    dblclickEvent(e,feature) {
      const features = feature.get('features') || []
      if (features.length > 1) {
        this.$emit('dblclickCircle',{e, feature, features})
      } else {
        this.$emit('dblclickPoint',{e, feature, point:features[0]})
      }
    },
    // 绑定事件
    bindEvents() {
      const cluster = this.$refs.cluster
      cluster.$on('contextmenu', this.contextMenuEvent)
      // cluster.$on('click', this.clickEvent)
      // cluster.$on('dblclick', this.dblclickEvent)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>